<div v-cloak id="app" class="main-content">
    <one-tabs :option="tabData" @change="handleChange"></one-tabs>
    <one-table :option="tableOption" :data="tableData" :loading="loading" @current-change="" @size-change="">
        <!-- 自定义操作列 -->
        <template slot="operates" slot-scope="scope">
            <el-button title='添加至模块库' size="mini" type="primary" :disabled="scope.row.system" class="_tool" @click="addToTemplate(scope.row, scope.index)">
                <i class="el-icon-circle-plus"></i>
            </el-button>
        </template>
        <!-- 自定义列 -->
        <template slot="create_time" slot-scope="scope">
            <span>{{dateFormat(scope.row.create_time)}}</span>
        </template>
        <template slot="user_desc" slot-scope="scope">
            <span :title="scope.row.user_desc">{{scope.row.user_desc}}</span>
        </template>
        <template slot="empty">
            请检查票据及TOKEN设置
        </template>
    </one-table>
</div>
{include file='common@components/one-tabs'}
{include file='common@components/one-table'}

<script>
    const _tabData = {:json_encode($tab_data, 256)};
    const _tableData = {:json_encode($table_data, 256)};
    new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                tabData:_tabData,
                tableData: _tableData || [],
                tableOption: {
                    index: true,
                    operates: {width: 60},
                    header: false,
                    size: 'mini',
                    page: false,
                    column: [{
                        label: '版本号',
                        prop: 'user_version',
                        width: 100,
                    }, {
                        label: '上传人员',
                        prop: 'developer',
                        width: 160,
                    }, {
                        label: '描述',
                        align: 'left',
                        slot:true,
                        prop: 'user_desc'
                    }, {
                        label: '添加时间',
                        prop: 'create_time',
                        slot: true,
                        width: 160,
                    }, ]
                }
            }
        },

        created() {

        },
        mounted() {
           
        },
        methods: {
            //时间格式化
            dateFormat: function (val) {
                var t = new Date(val*1000)
                if(!t){
                    return ''
                }
                let year = t.getFullYear()
                let month = this.dateIfAddZero(t.getMonth()+1)
                let day = this.dateIfAddZero(t.getDate())
                let hours = this.dateIfAddZero(t.getHours())
                let minutes = this.dateIfAddZero(t.getMinutes())
                let seconds = this.dateIfAddZero(t.getSeconds())
                return year + '-' + month + '-' + day+ ' ' + hours + ':' + minutes+ ':' + seconds
            },
            dateIfAddZero : function (time) {
                return time < 10 ? '0' + time : time  
            },
            // 切换标签
            handleChange(item) {
                window.location.href = item.url
            },
            //添加至模板库
            addToTemplate(row,index) {
                let _this = this
                _this.loading = true
                request({
                    params: {
                        s: 'one_wxopen/wemini/draft/',
                    },
                    data:{draft_id:row.draft_id},
                    method: 'post'
                }).then(e => {
                    _this.loading = false
                    _this.handleChange(_this.tabData.column[0])
                })
            },
        }
    })
</script>
<style>
    .el-table_1_column_5 div.cell{
        overflow: hidden;
        white-space: nowrap!important;
    }
</style>